<template>
  <div class="loginORregist">
    <div class="loginContent">
      <div v-show="title.length > 0" class="login-title">
        <img src="~@/assets/imgs/login/logo.png" alt="" />
        <span>{{ title }}</span>
        <div class="tip">校园好物租赁后台管理平台，登录平台管理账户信息</div>
      </div>
      <div class="loginORregistContent">
        <login-tag v-if="islogin" @getRegistTag="getRegistTag" ref="loginRef" />
        <regist-tag 
          v-else
          :isregist="isregist"
          @getLoginTag="getLoginTag"
          @changeTab="changeTab"
          @triggerBrotherMethods="triggerBrotherMethods"
        />
        </el-tabs>
      </div>
    </div>
    <div class="footer">
      <label>copyright©</label>
    </div>
  </div>
</template>
<script>
import LoginTag from "./components/loginTag";
import RegistTag from "./components/registTag";

export default {
  components: {
    LoginTag,
    RegistTag,
  },
  data() {
    return {
      activeName: "login",
      title: "校园好物租赁后台管理平台",
      islogin: true,
      isregist: true,
    };
  },
  methods: {
    triggerBrotherMethods(name) {
      this.$refs.loginRef.bortherMethods(name);
    },
    changeTab(tabtype) {
      this.activeName = tabtype;
    },
    handleClick(tab, event) {},
    getRegistTag(val) {
      this.islogin = false;
      this.isregist = val;
    },
    getLoginTag(val) {
      this.islogin = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.loginORregist {
  position: relative;
  background: url(~@/assets/imgs/login/loginBG.png) center no-repeat;
  background-size: cover;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-title {
  // width: 350px;
  height: 60px;
  /* line-height: 60px; */
  margin-bottom: 40px;
  text-align: center;

  .tip {
    line-height: 45px;
    font-size: 13px;
    color: #52627a;
  }
  img {
    width: 55px;
    // background: #dedede;
    vertical-align: middle;
    margin-right: 20px;
  }
  span {
    font-size: 30px;
    color: #ffffff;
    vertical-align: middle;
  }
}
.loginORregistContent {
  background-color: #ffffff;
  padding: 40px 65px;
  border-radius: 10px;
  /deep/ .el-tabs {
    .el-tabs__nav {
      width: 100%;
    }
    #tab-login,
    #tab-regist {
      font-size: 18px;
      width: 50%;
      text-align: center;
    }
  }
}

.footer {
  position: absolute;
  bottom: 40px;
  text-align: center;
  font-size: 14px;
  color: #908e8e;
  label.span {
    vertical-align: middle;
  }
}
</style>
